<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userState, getMyNotes, getDrafts, updateUserInfo, logout, checkLogin } from '../store.js'
import NoteCard from '../components/NoteCard.vue'
import { clearAllReplies } from '../utils/clearReplies.js'

const router = useRouter()
const route = useRoute()
const activeTab = ref('videos') // 默认显示已发布视频

// 从store中获取视频数据
const publishedVideos = computed(() => userState.publishedVideos || [
  { id: 'video1', title: 'Vue 3 组合式API完全指南', thumbnail: 'https://picsum.photos/400/225?random=10', views: '12543', likes: '2341', publishDate: '2023-11-15' },
  { id: 'video2', title: 'TypeScript 入门到精通', thumbnail: 'https://picsum.photos/400/225?random=11', views: '23891', likes: '4123', publishDate: '2023-10-28' },
  { id: 'video3', title: '现代CSS布局技巧', thumbnail: 'https://picsum.photos/400/225?random=12', views: '9756', likes: '1567', publishDate: '2023-10-10' },
  { id: 'video4', title: '状态管理详解', thumbnail: 'https://picsum.photos/400/225?random=13', views: '15432', likes: '2890', publishDate: '2023-09-22' },
  { id: 'video5', title: '前端性能优化实战', thumbnail: 'https://picsum.photos/400/225?random=14', views: '18765', likes: '3456', publishDate: '2023-09-05' },
  { id: 'video6', title: '响应式设计最佳实践', thumbnail: 'https://picsum.photos/400/225?random=15', views: '11234', likes: '1987', publishDate: '2023-08-18' }
])

const likedVideos = computed(() => userState.likedVideos || [
  { id: 'liked1', title: 'JavaScript 高级特性解析', thumbnail: 'https://picsum.photos/400/225?random=20', views: '32456', likes: '5678', publishDate: '2023-11-10' },
  { id: 'liked2', title: 'Node.js 后端开发实战', thumbnail: 'https://picsum.photos/400/225?random=21', views: '28901', likes: '4321', publishDate: '2023-10-25' },
  { id: 'liked3', title: 'Webpack 5 配置全攻略', thumbnail: 'https://picsum.photos/400/225?random=22', views: '15678', likes: '2345', publishDate: '2023-10-05' },
  { id: 'liked4', title: 'GraphQL 入门到精通', thumbnail: 'https://picsum.photos/400/225?random=23', views: '21345', likes: '3890', publishDate: '2023-09-30' },
  { id: 'liked5', title: 'CI/CD 自动化部署实践', thumbnail: 'https://picsum.photos/400/225?random=24', views: '18765', likes: '3123', publishDate: '2023-09-15' },
  { id: 'liked6', title: '微前端架构详解', thumbnail: 'https://picsum.photos/400/225?random=25', views: '25432', likes: '4567', publishDate: '2023-09-01' }
])
const scrollContainerRef = ref(null)
const loadingMore = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)
const pageSize = 10

// 编辑模式相关状态
const isEditMode = ref(false)
const editingBio = ref('')
const editingAvatar = ref('')

// 检查用户是否为有效的会员
const isMemberValid = computed(() => {
  const users = JSON.parse(localStorage.getItem('users') || '[]');
  const currentUser = users.find(u => u.username === userInfo.value.username);
  if (!currentUser || !currentUser.isMember) return false;
  
  // 检查会员是否在有效期内
  if (currentUser.memberExpiry) {
    const expiryDate = new Date(currentUser.memberExpiry);
    return expiryDate > new Date();
  }
  return true;
});

// 帖子表单相关状态
const showPostForm = ref(false)
const postTitle = ref('')
const postContent = ref('')
const postTags = ref('')

// 获取用户信息和笔记数据
const userInfo = computed(() => userState.userInfo)
const myNotes = computed(() => getMyNotes())
const myDrafts = computed(() => getDrafts())

// 切换标签页
const changeTab = (tab) => {
  activeTab.value = tab
  // 滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// 查看更多功能
const viewMore = (section) => {
  // 根据不同部分跳转到相应页面
  router.push(`/profile/${section}`)
}

// 处理滚动加载更多
const handleScroll = (event) => {
  const container = event.target
  const scrollLeft = container.scrollLeft
  const scrollWidth = container.scrollWidth
  const clientWidth = container.clientWidth
  
  // 当滚动到距离右侧200px时，加载更多
  if (scrollWidth - scrollLeft - clientWidth < 200 && !loadingMore.value && hasMore.value) {
    loadMore()
  }
}

// 加载更多内容
const loadMore = async () => {
  if (loadingMore.value || !hasMore.value) return
  
  loadingMore.value = true
  
  try {
    // 模拟加载更多数据的延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 实际项目中这里应该是调用API获取更多数据
    // 这里我们只是简单地增加页码
    currentPage.value++
    
    // 模拟数据加载完毕的情况
    if (currentPage.value > 3) {
      hasMore.value = false
    }
  } catch (error) {
    console.error('Failed to load more:', error)
  } finally {
    loadingMore.value = false
  }
}

// 进入编辑模式
const enterEditMode = () => {
  isEditMode.value = true
  editingBio.value = userInfo.value.bio || ''
  editingAvatar.value = userInfo.value.avatar || ''
}

// 保存用户信息
const saveUserInfo = () => {
  // 更新用户信息到store
  updateUserInfo({
    ...userInfo.value,
    bio: editingBio.value,
    avatar: editingAvatar.value
  })
  
  // 退出编辑模式
  isEditMode.value = false
}

// 取消编辑
const cancelEdit = () => {
  isEditMode.value = false
  editingBio.value = userInfo.value.bio || ''
  editingAvatar.value = userInfo.value.avatar || ''
}

// 处理头像上传
const handleAvatarUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    // 创建一个临时URL来预览头像
    const reader = new FileReader()
    reader.onload = (e) => {
      editingAvatar.value = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

// 使用随机头像
const useRandomAvatar = () => {
  editingAvatar.value = `https://picsum.photos/200/200?random=${Math.floor(Math.random() * 1000)}`
}

// 打开发表帖子表单
const openPostForm = () => {
  showPostForm.value = true
}

// 关闭发表帖子表单
const closePostForm = () => {
  showPostForm.value = false
  postTitle.value = ''
  postContent.value = ''
  postTags.value = ''
}

// 发表帖子
const publishPost = () => {
  // 简单表单验证
  if (!postTitle.value.trim() || !postContent.value.trim()) {
    alert('请输入标题和内容')
    return
  }
  
  // 创建新帖子
  const newPost = {
    id: Date.now().toString(),
    title: postTitle.value.trim(),
    content: postContent.value.trim(),
    category: 'knowledge', // 默认分类为知识
    author: '当前用户', // 使用统一的标识
    avatar: 'https://picsum.photos/200/200?random=user',
    tags: postTags.value.split(',').map(tag => tag.trim()).filter(tag => tag),
    views: 0,
    replies: 0,
    likes: 0,
    time: new Date().toISOString(),
    user: userInfo.value,
    images: []
  }
  
  // 添加到笔记列表
  let allNotes = JSON.parse(localStorage.getItem('notes')) || []
  allNotes.unshift(newPost)
  localStorage.setItem('notes', JSON.stringify(allNotes))
  
  // 同时保存到全局帖子存储中
  let allPosts = JSON.parse(localStorage.getItem('posts')) || []
  allPosts.unshift(newPost)
  localStorage.setItem('posts', JSON.stringify(allPosts))
  
  // 关闭表单并清空输入
  closePostForm()
  
  // 重新加载用户帖子数据，确保新帖子显示在页面上
  loadUserPosts()
  
  // 显示成功提示
  alert('发布成功！')
}

// 用户帖子数据
const userPosts = ref([])

// 加载用户发布的帖子
const loadUserPosts = () => {
  const storedPosts = localStorage.getItem('posts')
  if (storedPosts) {
    try {
      const posts = JSON.parse(storedPosts)
      userPosts.value = posts.filter(post => post.author === userInfo.username || post.author === '当前用户')
    } catch (error) {
      console.error('加载用户帖子数据失败:', error)
    }
  } else {
    // 如果没有保存的帖子，创建一些模拟数据以确保页面正常显示
    const mockUserPosts = [
      {
        id: 'user-post-1',
        title: '我的第一次宠物训练经历',
        content: '分享一下我训练小狗的经验，虽然过程很艰难，但看到狗狗学会新技能还是很有成就感的！',
        category: 'pets',
        author: userInfo.username,
        avatar: userInfo.avatar,
        tags: ['狗狗训练', '新手教程'],
        views: 123,
        replies: 15,
        likes: 28,
        time: '昨天'
      },
      {
        id: 'user-post-2',
        title: '推荐一款很好用的护肤品',
        content: '最近使用了一款新的保湿产品，效果非常好，特别适合敏感肌肤的朋友们使用。',
        category: 'beauty',
        author: userInfo.username,
        avatar: userInfo.avatar,
        tags: ['护肤品推荐', '敏感肌肤'],
        views: 234,
        replies: 34,
        likes: 56,
        time: '3天前'
      }
    ]
    userPosts.value = mockUserPosts
  }
}





// 编辑草稿
const editDraft = (draft) => {
  postTitle.value = draft.title
  postContent.value = draft.content
  postTags.value = draft.tags.join(', ')  
  showPostForm.value = true
}

// 删除草稿
const deleteDraft = (draftId) => {
  if (confirm('确定要删除这个草稿吗？')) {
    // 在实际项目中，这里应该调用API删除草稿
    // 然后重新获取草稿列表
    
    // 这里我们简单地模拟从本地存储删除
    let drafts = JSON.parse(localStorage.getItem('drafts')) || []
    drafts = drafts.filter(draft => draft.id !== draftId)
    localStorage.setItem('drafts', JSON.stringify(drafts))
    
    // 刷新页面以更新草稿列表
    router.go(0)
  }
}

// 处理帖子点击
const handlePostClick = (postId) => {
  router.push(`/post/${postId}`)
}

// 初始化数据
const initializeData = () => {
  // 检查登录状态
  checkLogin()
  
  // 尝试从本地存储加载笔记数据（如果store中没有数据）
  if (!userState.notes || userState.notes.length === 0) {
    const savedNotes = localStorage.getItem('notes')
    if (!savedNotes) {
      // 如果没有保存的笔记，创建一些模拟数据以确保页面正常显示
      const mockNotes = [
        {
          id: 'demo-1',
          title: '如何提高工作效率？',
          content: '最近工作效率低下，想要寻找一些有效的时间管理方法...',
          category: 'knowledge',
          author: '当前用户',
          avatar: 'https://picsum.photos/200/200?random=user',
          tags: ['效率', '时间管理'],
          views: 0,
          replies: 0,
          likes: 0,
          time: new Date().toISOString(),
          user: {
            id: 'default-user',
            username: '当前用户',
            avatar: 'https://picsum.photos/200/200?random=user',
            bio: '欢迎来到我的个人主页'
          }
        }
      ]
      localStorage.setItem('notes', JSON.stringify(mockNotes))
    }
  }
  
  // 尝试从本地存储加载用户信息（如果store中没有用户信息）
  if (!userState.userInfo) {
    const savedUserInfo = localStorage.getItem('userInfo')
    if (!savedUserInfo) {
      // 如果没有保存的用户信息，创建一个默认用户
      const defaultUser = {
        id: 'default-user',
        username: '当前用户',
        avatar: 'https://picsum.photos/200/200?random=user',
        bio: '欢迎来到我的个人主页',
        joinDate: new Date().toISOString()
      }
      localStorage.setItem('userInfo', JSON.stringify(defaultUser))
      
      // 更新用户状态
      updateUserInfo(defaultUser)
    }
  }
  
  // 加载用户发布的帖子
  loadUserPosts()
}

// 登录
const goToLogin = () => {
  router.push('/login')
}

// 登出功能
const handleLogout = async () => {
  try {
    await logout()
    router.push('/')
  } catch (error) {
    console.error('登出失败:', error)
  }
}

// 查看视频详情
const viewVideoDetail = (videoId) => {
  router.push(`/video/${videoId}`)
}

// 挂载和卸载时添加/移除滚动事件监听
onMounted(() => {
  initializeData()
  if (scrollContainerRef.value) {
    scrollContainerRef.value.addEventListener('scroll', handleScroll)
  }
  
  // 根据路由参数设置初始标签页
  const path = route.path
  if (path.includes('/topics')) {
    activeTab.value = 'topics'
  } else if (path.includes('/videos')) {
    activeTab.value = 'videos'
  } else if (path.includes('/examples')) {
    activeTab.value = 'examples'
  } else if (path.includes('/posts')) {
    activeTab.value = 'posts'
  }
})

// 监听路由变化，更新标签页
watch(
  () => route.path,
  (newPath) => {
    if (newPath.includes('/videos')) {
      activeTab.value = 'videos'
    } else if (newPath.includes('/likes')) {
      activeTab.value = 'likes'
    } else if (newPath.includes('/posts')) {
      activeTab.value = 'posts'
    } else if (newPath === '/profile') {
      activeTab.value = 'videos'
    }
  }
)

onUnmounted(() => {
  if (scrollContainerRef.value) {
    scrollContainerRef.value.removeEventListener('scroll', handleScroll)
  }
})
</script>

<template>
  <div class="profile-page">
    <div class="page-header">
      <h1>个人主页</h1>
    </div>
    
    <!-- 未登录状态 -->
    <div v-if="!userState.isLoggedIn" class="not-login">
      <div class="login-prompt">
        <svg class="empty-icon" width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <path d="M12 16V12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          <path d="M12 8H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <h3>请先登录</h3>
        <p>登录后可以查看和管理您的个人信息和发布的内容</p>
        <button class="login-btn" @click="goToLogin">立即登录</button>
      </div>
    </div>
    
    <!-- 已登录状态 -->
    <div v-else class="profile-content">
      <!-- 用户信息区域 -->
      <div class="user-info">
        <div class="avatar-container">
          <img :src="userInfo.avatar" alt="用户头像" class="avatar" />
        </div>
        
        <div class="user-details">
        <div class="username-container">
          <h2>{{ userInfo.username }}</h2>
          <span v-if="isMemberValid" class="member-badge">会员</span>
        </div>
        
        <!-- 查看模式 -->
        <div v-if="!isEditMode" class="user-bio">
          {{ userInfo.bio || '这个人很懒，什么都没有写...' }}
        </div>
          
          <!-- 编辑模式 -->
          <div v-else class="edit-form">
            <textarea
              v-model="editingBio"
              placeholder="请输入个性签名"
              class="bio-input"
              rows="3"
            ></textarea>
            
            <div class="avatar-upload-section">
              <label class="avatar-upload-label">
                <input type="file" accept="image/*" @change="handleAvatarUpload" class="avatar-upload-input" />
                上传头像
              </label>
              <button type="button" class="random-avatar-btn" @click="useRandomAvatar">
                随机头像
              </button>
            </div>
            
            <div class="edit-actions">
              <button type="button" class="save-btn" @click="saveUserInfo">
                保存
              </button>
              <button type="button" class="cancel-btn" @click="cancelEdit">
                取消
              </button>
            </div>
          </div>
          
          <div class="user-stats">
            <div class="stat-item clickable-box">
              <span class="stat-value">{{ publishedVideos.length }}</span>
              <span class="stat-label">视频</span>
            </div>
            <div class="stat-item clickable-box">
              <span class="stat-value">{{ likedVideos.length }}</span>
              <span class="stat-label">喜欢</span>
            </div>
            <div class="stat-item clickable-box">
              <span class="stat-value">{{ userInfo.following || 0 }}</span>
              <span class="stat-label">关注</span>
            </div>
            <div class="stat-item clickable-box">
              <span class="stat-value">{{ userInfo.followers || 0 }}</span>
              <span class="stat-label">粉丝</span>
            </div>
          </div>
        </div>
        
        <div class="action-buttons">
          <button v-if="!isEditMode" class="edit-profile-btn clickable-box" @click="enterEditMode">
            编辑资料
          </button>
          <button class="upload-video-btn clickable-box">
            上传视频
          </button>
          <button class="create-btn clickable-box" @click="showPostForm = true">
            发布帖子
          </button>
          <button class="logout-btn clickable-box" @click="handleLogout">
            退出登录
          </button>
        </div>
      </div>
      
      <!-- 内容标签页 -->
      <div class="content-tabs">
        <div class="tab-buttons">
          <button 
            class="tab-btn clickable-box" 
            :class="{ active: activeTab === 'videos' }"
            @click="changeTab('videos')"
          >
            已发布视频
          </button>
          <button 
            class="tab-btn clickable-box" 
            :class="{ active: activeTab === 'likes' }"
            @click="changeTab('likes')"
          >
            我的喜欢
          </button>
          <button 
            class="tab-btn clickable-box" 
            :class="{ active: activeTab === 'posts' }"
            @click="changeTab('posts')"
          >
            我的帖子
          </button>
        </div>

        <!-- 已发布视频内容 -->
        <div 
          v-if="activeTab === 'videos'" 
          class="tab-content" 
          :class="{ active: activeTab === 'videos' }"
        >
          <div class="section-header">
            <h3>我的视频作品</h3>
          </div>
          
          <!-- 视频列表 -->
          <div v-if="publishedVideos.length > 0" class="videos-grid">
            <div 
              v-for="video in publishedVideos" 
              :key="video.id" 
              class="video-card clickable-box"
              @click="viewVideoDetail(video.id)"
            >
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="视频缩略图">
              </div>
              <h4 class="video-title">{{ video.title }}</h4>
              <div class="video-meta">
                <span class="video-stats">{{ video.views }} 次观看</span>
                <span class="video-stats">{{ video.likes }} 个赞</span>
                <span class="video-date">{{ video.publishDate }}</span>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-state">
            <div class="empty-icon">📹</div>
            <h3>还没有发布视频</h3>
            <p>点击"上传视频"按钮开始分享你的内容</p>
          </div>
        </div>
        
        <!-- 我的喜欢内容 -->
        <div 
          v-if="activeTab === 'likes'" 
          class="tab-content" 
          :class="{ active: activeTab === 'likes' }"
        >
          <div class="section-header">
            <h3>我喜欢的视频</h3>
          </div>
          
          <!-- 喜欢的视频列表 -->
          <div v-if="likedVideos.length > 0" class="videos-grid">
            <div 
              v-for="video in likedVideos" 
              :key="video.id" 
              class="video-card clickable-box"
              @click="viewVideoDetail(video.id)"
            >
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="视频缩略图">
              </div>
              <h4 class="video-title">{{ video.title }}</h4>
              <div class="video-meta">
                <span class="video-stats">{{ video.views }} 次观看</span>
                <span class="video-stats">{{ video.likes }} 个赞</span>
                <span class="video-date">{{ video.publishDate }}</span>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-state">
            <div class="empty-icon">❤️</div>
            <h3>还没有喜欢的视频</h3>
            <p>浏览视频时点击点赞按钮添加到这里</p>
          </div>
        </div>
        
        <!-- 我的帖子内容 -->
        <div 
          v-if="activeTab === 'posts'" 
          class="tab-content" 
          :class="{ active: activeTab === 'posts' }"
        >
          <div class="section-header">
            <h3>我的帖子</h3>
          </div>
          
          <!-- 帖子列表 -->
          <div v-if="userPosts.length > 0" class="posts-grid">
            <div 
              v-for="post in userPosts" 
              :key="post.id" 
              class="post-card clickable-box"
              @click="handlePostClick(post.id)"
            >
              <div class="post-header">
                <img :src="post.avatar" alt="用户头像" class="post-avatar" />
                <div class="post-author-info">
                  <span class="post-author">{{ post.author }}</span>
                  <span class="post-time">{{ post.time }}</span>
                </div>
              </div>
              <h4 class="post-title">{{ post.title }}</h4>
              <p class="post-content">{{ post.content }}</p>
              <div class="post-tags">
                <span v-for="tag in post.tags" :key="tag" class="post-tag">{{ tag }}</span>
              </div>
              <div class="post-meta">
                <span class="post-stats">{{ post.views }} 次浏览</span>
                <span class="post-stats">{{ post.replies }} 条回复</span>
                <span class="post-stats">{{ post.likes }} 个赞</span>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-state">
            <div class="empty-icon">📝</div>
            <h3>还没有发布帖子</h3>
            <p>点击"发布帖子"按钮开始分享你的内容</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 发表帖子弹窗 -->
    <div v-if="showPostForm" class="post-modal">
      <div class="modal-backdrop" @click="closePostForm"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h2>发表笔记</h2>
          <button class="close-btn" @click="closePostForm">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="publishPost">
            <div class="form-group">
              <label for="post-title">标题</label>
              <input
                id="post-title"
                v-model="postTitle"
                type="text"
                placeholder="请输入标题"
                required
                class="input"
              />
            </div>
            <div class="form-group">
              <label for="post-content">内容</label>
              <textarea
                id="post-content"
                v-model="postContent"
                placeholder="请输入内容"
                required
                class="textarea"
                rows="6"
              ></textarea>
            </div>
            <div class="form-group">
              <label for="post-tags">标签</label>
              <input
                id="post-tags"
                v-model="postTags"
                type="text"
                placeholder="请输入标签，用逗号分隔"
                class="input"
              />
            </div>
            <div class="form-actions">
              <button type="button" class="cancel-btn" @click="closePostForm">
                取消
              </button>
              <button type="submit" class="publish-btn">
                发布
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profile-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 美化框样式 */
.clickable-box {
  background-color: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.clickable-box:hover {
  border-color: #ff2442;
  box-shadow: 0 4px 12px rgba(255, 36, 66, 0.1);
  transform: translateY(-2px);
}

.clickable-box:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 36, 66, 0.2);
}

/* 按钮特殊处理 */
.action-buttons .clickable-box {
  margin: 5px;
  padding: 10px 20px;
}

/* 统计项特殊处理 */
.user-stats .clickable-box {
  padding: 15px 20px;
  text-align: center;
  min-width: 80px;
}

/* 标签页按钮特殊处理 */
.tab-buttons .clickable-box {
  margin-right: 10px;
  padding: 12px 24px;
  background-color: #f8f9fa;
}

.tab-buttons .clickable-box.active {
  background-color: #ff2442;
  color: white;
  border-color: #ff2442;
}

/* 卡片特殊处理 */
.video-card.clickable-box,
.post-card.clickable-box {
  padding: 20px;
  margin-bottom: 15px;
}

/* 确保表单元素不被美化框影响 */
.edit-form .clickable-box {
  cursor: default;
  border: none;
  box-shadow: none;
  padding: 0;
}

.edit-form .clickable-box:hover {
  transform: none;
  border-color: #e0e0e0;
  box-shadow: none;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.not-login {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.login-prompt {
  text-align: center;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 40px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.login-prompt h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.login-prompt p {
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
}

.login-btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #ff2442;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s;
  cursor: pointer;
}

.login-btn:hover {
  background-color: #e01e38;
}

.profile-content {
  width: 100%;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 30px;
}

.avatar-container {
  margin-right: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.user-details {
  flex: 1;
}

.user-details h2 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #333;
  display: inline-block;
}

.username-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.member-badge {
  background-color: #ffd700;
  color: #333;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.user-bio {
  color: #666;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.user-stats {
  display: flex;
  gap: 32px;
  margin: 16px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.create-btn {
  padding: 10px 24px;
  background-color: #ff2442;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
  cursor: pointer;
}

.create-btn:hover {
  background-color: #e01e38;
}

.content-tabs {
  width: 100%;
}

.tab-buttons {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.tab-btn {
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  position: relative;
  transition: color 0.3s;
}

.tab-btn:hover {
  color: #1677ff;
}

.tab-btn.active {
  color: #1677ff;
  font-weight: 600;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: #1677ff;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* 帖子网格布局 */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

/* 帖子卡片样式 */
.post-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.post-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.post-author-info {
  display: flex;
  flex-direction: column;
}

.post-author {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.post-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.post-content {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.post-tag {
  font-size: 12px;
  color: #3498db;
  background-color: #e8f4fd;
  padding: 4px 10px;
  border-radius: 12px;
}

.post-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #999;
}

/* 视频网格布局 */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.video-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
  background: #f0f0f0;
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-title {
  padding: 12px 16px 8px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  padding: 0 16px 12px;
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #666;
  flex-wrap: wrap;
}

/* 横向滚动容器 */
.horizontal-scroll-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ddd #f5f5f5;
}

/* 滚动条样式 */
.horizontal-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.horizontal-scroll-container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/* 横向内容容器 */
.horizontal-scroll-content {
  display: flex;
  padding: 20px;
  gap: 20px;
  min-width: max-content;
}

/* 横向卡片样式 */
.horizontal-card {
  width: 300px;
  flex-shrink: 0;
  margin-bottom: 0;
}

/* 草稿卡片样式 */
.draft-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #ff2442;
  width: 300px;
}

.draft-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}

.draft-content {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.draft-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.draft-tag {
  font-size: 12px;
  color: #999;
  background-color: #f5f5f5;
  padding: 4px 10px;
  border-radius: 12px;
}

.draft-actions {
  display: flex;
  gap: 10px;
}

.edit-btn, .delete-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-btn {
  background-color: #f5f5f5;
  color: #333;
}

.edit-btn:hover {
  background-color: #e5e5e5;
}

.delete-btn {
  background-color: #fff0f0;
  color: #ff2442;
}

.delete-btn:hover {
  background-color: #ffe0e0;
}

/* 加载中状态 */
.loading-more {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #666;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #ff2442;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 查看更多按钮 */
.view-more-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  background-color: #f5f5f5;
  color: #3498db;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.view-more-btn:hover {
  background-color: #e8f4fd;
  color: #2980b9;
}

/* 区域标题 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;
}

.section-header h3 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

/* 讨论话题样式 */
.topics-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

.topic-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #3498db;
}

.topic-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
}

.topic-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

/* 攻略视频样式 */
.videos-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

.video-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.video-title {
  padding: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.video-meta {
  padding: 0 15px 15px;
  font-size: 12px;
  color: #666;
}

/* 相关例子样式 */
.examples-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

.example-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #2ecc71;
}

.example-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
}

.example-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #666;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  color: #999;
}

/* 发表帖子弹窗 */
.post-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background-color: white;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.close-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.input:focus {
  outline: none;
  border-color: #ff2442;
}

.textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.3s;
}

.textarea:focus {
  outline: none;
  border-color: #ff2442;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.publish-btn {
  padding: 10px 24px;
  background-color: #ff2442;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.publish-btn:hover {
  background-color: #e01e38;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
  
  .avatar-container {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .user-stats {
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.edit-profile-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.upload-video-btn {
  padding: 8px 16px;
  background: #1677ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.logout-btn {
  padding: 8px 16px;
  background: #fff;
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.logout-btn:hover {
  background: #fff1f0;
}
  
  .tab-buttons {
    justify-content: center;
  }
  
  .horizontal-card {
    width: 260px;
  }
  
  .draft-card {
    width: 260px;
  }
  
  .horizontal-scroll-content {
    padding: 16px;
    gap: 16px;
  }
  
  .modal-content {
    margin: 20px;
  }
}

@media (max-width: 480px) {
  .horizontal-card {
    width: 220px;
  }
  
  .draft-card {
    width: 220px;
  }
  
  .horizontal-scroll-content {
    padding: 12px;
    gap: 12px;
  }
  
  .user-stats {
    gap: 20px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions button {
    width: 100%;
  }
}
</style>